<template>
    <div class="box">
        <van-nav-bar
            title="配件入库单"
            class="navBar"
            left-arrow
            @click-left="back()"
            :border="false"
        ></van-nav-bar>
        <div class="cartsInfo">
            <van-form @submit="onSubmit">
                <!-- <van-search
                        v-model="searchValue"
                        show-action
                        action-text="搜索"
                        right-icon="scan"
                        placeholder="请输入搜索内容"
                        @search="onSearch"
                        class="search"
                    /> -->
                <div class="content">
                    <van-cell-group class="baseMsg">
                        <van-field
                            v-model="form.category"
                            name="车型"
                            label="车型："
                            placeholder="车型"
                            is-link
                            :rules="[{ required: true, message: '请选择车型' }]"
                        />
                        <van-field
                            v-model="form.no"
                            name="车牌"
                            label="车牌："
                            placeholder="车牌"
                            right-icon="scan"
                            :rules="[{ required: true, message: '请填写车牌' }]"
                            
                        >
                            
                        </van-field>
                        <van-field
                            v-model="form.saleNo"
                            name="维修单号"
                            label="维修单号："
                            placeholder="维修单号"
                            :rules="[
                                { required: true, message: '请填写维修单号' },
                            ]"
                        />
                        <van-field name="radio" label="订单类型：">
                            <template #input>
                                <van-radio-group
                                    v-model="form.orderType"
                                    direction="horizontal"
                                >
                                    <van-radio name="1">配件</van-radio>
                                    <van-radio name="2">钣喷</van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>
                        <!-- <div class="partsType">
                            <van-row>
                                <van-col span="6"><van-button size="small" type="danger" color="#5E2F88">原厂</van-button></van-col>
                                <van-col span="6"><van-button size="small" type="warning" color="rgb(206 211 214)">原厂配套</van-button></van-col>
                                <van-col span="6"> <van-button size="small" type="warning" color="rgb(206 211 214)">品牌</van-button></van-col>
                                <van-col span="6"><van-button size="small" type="warning" color="rgb(206 211 214)">不限</van-button></van-col>
                            </van-row>
                        </div> -->
                        <!-- <div class="total">
                            <div class="cost">进价总价：<b class="money">￥{{form.cost}}</b></div>
                            <div class="price">售价总价：<b class="money">￥{{form.price}}</b></div>
                        </div> -->
                    </van-cell-group>

                    <van-cell-group
                        v-for="p in form.parts"
                        :key="p.name"
                        class="baseMsg"
                    >
                        <van-field
                            v-model="p.name"
                            name="配件名称"
                            label="配件名称："
                            placeholder="请输入配件名称"
                        />
                        <van-field
                            v-model="p.type"
                            name="类型"
                            label="配件类型："
                            placeholder="请输入配件类型"
                            :rules="[{ required: false, message: '' }]"
                        >
                            <template #button>
                                <van-stepper v-model="p.num" />
                            </template>
                        </van-field>
                        <van-field
                            v-model="p.cost"
                            name="进价"
                            label="进价："
                            label-width="50"
                            placeholder="请输入进价"
                            :rules="[{ required: true, message: '请输入进价' }]"
                        >
                            <template #button> /件 </template>
                        </van-field>
                        <van-field
                            v-model="p.price"
                            name="售价"
                            label="售价："
                            label-width="50"
                            placeholder="请输入售价"
                            :rules="[{ required: true, message: '请输入售价' }]"
                        >
                            <template #button> /件 </template>
                        </van-field>
                        <van-field
                            v-model="p.remarks"
                            name="备注"
                            label="备注："
                            label-width="50"
                            placeholder="请输入备注信息"
                            :rules="[{ required: true, message: '请输入备注信息' }]"
                        >
                            
                        </van-field>
                    </van-cell-group>

                    <van-cell-group>
                        <van-button
                            block
                            icon="plus"
                            @click="addParts()"
                        ></van-button>
                    </van-cell-group>
                </div>
                <!-- <div style="margin: 16px;">
                    <van-button block type="primary" native-type="submit">提交</van-button>
                </div> -->
                <footer>
                    <van-button type="primary" native-type="submit"
                        >提交</van-button
                    >
                    <div class="bar"></div>
                </footer>
            </van-form>
        </div>
    </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { addCarFittingsClient } from "api/parts.js";
import { Toast } from "vant";
const form = reactive({
    // VN:'',//VN码
    category: "", //车型
    no: "", //车牌
    saleNo: "", //维修单号
    orderType: "1", //订单类型
    // partsType:'',//配件来源
    // cost:0,//总进价
    // price:0,//总售价
    parts: [],
});

const onSubmit = async () => {
    // form.parts  = JSON.stringify(form.parts)
    console.log(form);
    var formData = new FormData();
    formData.append("category", form.category);
    formData.append("no", form.no);
    formData.append("orderType", form.orderType);
    formData.append("saleNo", form.saleNo);
    formData.append("parts", JSON.stringify(form.parts));
    let res = await addCarFittingsClient(formData);
    if (res.code == 0) {
        Toast.success("配件信息已保存");
    } else {
        Toast.fail("配件新增失败");
    }
    console.log("已提交");
};
const addParts = () => {
    form.parts.push({
        name: "",
        type: "",
        num: 1,
        cost: 0,
        price: 0,
    });
};
const router = useRouter();
const back = () => {
    router.back();
};
</script>
<style lang="scss" scoped>
.box {
    background: #f1f5f8;
    height: 100vh;
    .navBar {
        background: #fff;
    }
    .cartsInfo {
        height: 80%;
        overflow-y: auto;
        .content {
            padding: 0.9375rem /* 15/16 */;
            .baseMsg:not(:first-child) {
                margin-top: 0.9375rem /* 15/16 */;
            }
            .partsType {
                margin-top: 0.625rem /* 10/16 */;
                border-bottom: 1px solid #E5EBEF;
                padding-bottom: 1rem;
                button {
                    width: 4.4375rem /* 71/16 */;
                    height: 1.5625rem /* 25/16 */;
                    background: #5e2f88;
                    border-radius: 0.3125rem /* 5/16 */;
                    text-emphasis: center;
                    line-height: 1.5625rem;
                }
            }
        }
    }
}
.total {
    display: flex;
    margin: 1rem /* 16/16 */;
    margin-top: 0;
    text-align: center;
    font-size: 0.875rem /* 14/16 */;
    padding: 0.9375rem /* 15/16 */ 0;
    div {
        flex: 1;
        .money {
            color: #f13845;
        }
    }
}
footer {
    width: 100%;
    height: 5.625rem /* 90/16 */;
    background: #ffffff;
    box-shadow: 0px -10px 32px 8px rgba(0, 0, 0, 0.03);
    border-radius: 0.9375rem /* 15/16 */ 0.9375rem /* 15/16 */ 0px 0px;
    position: fixed;
    bottom: 0;
    text-align: center;
    button {
        width: 18.125rem /* 290/16 */;
        height: 2.75rem /* 44/16 */;
        margin-top: 1.25rem /* 20/16 */;
        border: none;
        outline: none;
        border-radius: 1.375rem /* 22/16 */;
        background: linear-gradient(10deg, #5e2f88, #694aa5);
    }
    .bar {
        width: 8.375rem /* 134/16 */;
        height: 0.3125rem /* 5/16 */;
        background: #000000;
        border-radius: 0.15625rem /* 2.5/16 */;
        margin: 13px auto 0;
    }
}
</style>
<style scoped>
.search /deep/ .van-search__content {
    border-radius: 1rem /* 16/16 */ !important;
}
.baseMsg {
    border-radius: 0.625rem /* 10/16 */ !important;
}
.baseMsg /deep/ div:nth-of-type(1) {
    border-radius: 0.625rem /* 10/16 */ !important;
}
.baseMsg /deep/ div:last-child {
    border-radius: 0.625rem /* 10/16 */ !important;
}
/* 搜索圆角 */
.box :deep() .van-search__content {
    border-radius: 1rem;
}
.box .van-field{
    height: 3.4375rem;
    display: flex;
    align-items: center;
}
.box :deep() .van-icon-scan{
    font-size: 1.25rem;
    
}
.baseMsg :deep() .van-icon-scan{
    color: #66429d;
}
</style>